<script setup lang="ts">
import {
  Space,
  Button,
  TableColumnsType,
  Table,
  Flex,
  message,
} from "ant-design-vue";
import { CaretRightOutlined } from "@ant-design/icons-vue";
import { MusicInfoOutput, PlaylistOutput, Service } from "../api";
import { getDurationText } from "../utils";
import MusicDetailDrawer from "./MusicDetailDrawer.vue";
import { ref, watch, h } from "vue";
import { useStore } from "../stores/";
const store = useStore();

const props = defineProps<{
  playlist: PlaylistOutput;
}>();

const emits = defineEmits<{
  change: [];
}>();

const loading = ref(false);
const dataSource = ref<MusicInfoOutput[]>([]);
const coloums: TableColumnsType = [
  {
    title: "序号",
    key: "index",
    width: 60,
    customRender: ({ index }: any) => {
      return `${index + 1}`;
    },
  },
  {
    title: "音乐标题",
    dataIndex: "title",
    ellipsis: true,
  },
  {
    title: "艺术家",
    dataIndex: "artist",
    width: 150,
  },
  {
    title: "专辑",
    dataIndex: "album",
    width: 150,
  },
  {
    title: "时长",
    dataIndex: "duration",
    width: 100,
    align: "right",
  },
  {
    title: "操作",
    key: "operation",
    width: 180,
    align: "right",
  },
];

const loadData = async () => {
  loading.value = true;
  try {
    dataSource.value = await Service.getMusicInfoInPlaylist({
      playlistId: props.playlist.id,
    });
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
};

const removePlayList = async (record: MusicInfoOutput) => {
  try {
    await Service.removeMusicInfoFromPlaylist({
      musicId: record.id,
      playlistId: props.playlist.id,
    });
    message.success("移出成功");
    loadData();
  } catch (error) {
    console.error(error);
  }
};

const deletePlaylist = async () => {
  try {
    await Service.deletePlaylist({
      playlistId: props.playlist.id,
    });
    message.success("删除歌单成功");
    emits("change");
  } catch (error) {
    console.error(error);
  }
};

const play = () => {
  if (dataSource.value.length > 0) {
    store.setAudios(dataSource.value);
  } else {
    message.error("歌单中没有歌曲");
  }
};

const selectedMusic = ref<MusicInfoOutput>();
const musicDetailDrawerOpen = ref(false);
const openMusicDetailDrawer = (record: MusicInfoOutput) => {
  selectedMusic.value = record;
  musicDetailDrawerOpen.value = true;
};

watch(
  () => props.playlist,
  () => {
    loadData();
  },
  {
    immediate: true,
  }
);
</script>
<template>
  <Space direction="vertical" style="width: 100%">
    <Flex style="justify-content: space-between; padding: 0 10px">
      <div class="title">{{ props.playlist.title }}</div>
      <Space>
        <Button type="primary" :icon="h(CaretRightOutlined)" @click="play"
          >播放</Button
        >
        <Button @click="deletePlaylist">删除歌单</Button>
      </Space>
    </Flex>
    <Space style="text-align: right; padding: 0 10px"> </Space>

    <Table
      :columns="coloums"
      :data-source="dataSource"
      :loading="loading"
      :pagination="false"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'duration'">
          {{ getDurationText(record.duration) }}
        </template>
        <template v-if="column.key === 'operation'">
          <Button
            type="link"
            size="small"
            @click="()=>openMusicDetailDrawer(record as MusicInfoOutput)"
            >详情</Button
          >
          <Button
            type="link"
            size="small"
            @click="()=>removePlayList(record as MusicInfoOutput)"
            >移出歌单</Button
          >
        </template>
      </template>
    </Table>
  </Space>
  <MusicDetailDrawer
    v-if="selectedMusic"
    v-model:open="musicDetailDrawerOpen"
    :music-info="selectedMusic"
  ></MusicDetailDrawer>
</template>
<style scoped>
.title {
  font-size: 48px;
  color: #333;
  padding: 10px;
  font-weight: 800;
}
</style>
